<template>
    <el-card>
        <el-form ref="form" label-width="70px" label-position="left" style="margin-top: 20px; box-sizing: border-box;"
            inline>
            <el-form-item label="商品名称" style="width: 250px;">
                <el-input placeholder="请输入商品名称"></el-input>
            </el-form-item>

            <el-form-item label="用户账号" style="width: 250px;">
                <el-input placeholder="请输入用户账号"></el-input>
            </el-form-item>

            <el-form-item label="订单状态" style="width: 250px;">
                <el-select placeholder="请选择订单状态">
                    <el-option label="待付款"></el-option>
                    <el-option label="待发货"></el-option>
                    <el-option label="待签收"></el-option>
                    <el-option label="待签收"></el-option>
                    <el-option label="已关闭"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="支付方式" style="width: 250px;">
                <el-select placeholder="请选择支付方式">
                    <el-option label="微信"></el-option>
                    <el-option label="支付宝"></el-option>
                    <el-option label="未支付"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="warning" icon="Refresh">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card style="margin:10px 0">
        <el-table :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]" style="width: 100%"
            height="600" border>
            <el-table-column type="selection" width="50px" align="center" fixed></el-table-column>
            <el-table-column prop="prop" label="序号" width="80px" type="index" align="center" fixed></el-table-column>
            <el-table-column prop="prop" label="订单编号" width="320px" align="center"></el-table-column>
            <el-table-column prop="prop" label="商品名称" width="200px" align="center"></el-table-column>
            <el-table-column prop="prop" label="收获地址" width="300px" align="center"></el-table-column>
            <el-table-column prop="prop" label="订单状态" width="100px" align="center"></el-table-column>
            <el-table-column prop="prop" label="用户账号" width="150px" align="center"></el-table-column>
            <el-table-column prop="prop" label="订单金额" width="100px" align="center"></el-table-column>
            <el-table-column prop="prop" label="支付方式" width="100px" align="center"></el-table-column>
            <el-table-column prop="prop" label="提交时间" width="250px" align="center"></el-table-column>
            <el-table-column prop="prop" label="操作" width="170px" align="center" fixed="right">
                <template #="{ row, $index }">
                    <el-button type="primary" icon="View" size="small"></el-button>
                    <el-button type="warning" icon="Edit" size="small"></el-button>
                    <el-button type="danger" icon="Delete" size="small"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top: 20px;" v-model:current-page="pageNo" v-model:page-size="pageSize"
            :page-sizes="[20, 40, 60]" :background="true" layout=" prev, pager, next, jumper,->,sizes,total"
            :total="400" @current-change="getHasSpu" @size-change='getHasSpu(1)' />
    </el-card>
</template>

<script setup lang="ts">
    import { onMounted, ref } from 'vue';

    const pageNo = ref<number>(1)
    const pageSize = ref<number>(20)

    onMounted(() => {
        console.log('-----------------------订单编辑-----------------------')
    })
</script>

<style scoped lang="scss"></style>